<template>
	<div class="foot_analysis table-theme">
		<head-title title="运营--用户足迹"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="type" @roleType="roleType"></tabs-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
				</div>
			</div>
			<p class="data-number">总足迹数：{{ total }}</p>
			<el-table :data="userBrowseList" stripe>
				<el-table-column label="用户序号" align="center" prop="user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<el-image :src="scope.row.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名字" align="center" prop="nickname"></el-table-column>
				<el-table-column label="电话" align="center" prop="phone"></el-table-column>
				<el-table-column label="角色" align="center" prop="role_name"></el-table-column>
				<el-table-column label="C/B端" align="center" prop="client"></el-table-column>
				<el-table-column label="归属商家ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="店铺ID" align="center" prop="store_id"></el-table-column>
				<el-table-column label="推荐人ID" align="center" prop="parent_id"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="动作" align="center" prop="where"></el-table-column>
				<el-table-column label="浏览次数" align="center" prop="num"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goFootDetails(scope.row.user_id)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import TabsView from '@/components/TabsView'
	export default {
		components:{
			TabsView
		},
		data() {
			return {
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				BrowseUserId: '', // 获取浏览记录要用到的用户id
				recordDialog: false, // 商品记录弹框
				otherRecordDialog: false, // 其他记录弹框
				userBrowseList: [], // 用户浏览记录列表
				total: 0,
				totalData: 0,
				type: 0,
				page: 0,
				classifyList: ['所有','小程序','APP','H5','PC','Ipad','后台系统'],
				searchOption: [
					{
						value: 0,
						label: "用户ID",
					},
					{
						value: 1,
						label: "归属商家",
					},
					{
						value: 2,
						label: "推荐人",
					},
					{
						value:3,
						label: "动作搜索"
					}
				],
				classSelect: 0,
				selectContent: "",
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					type: this.type,
					group: 1
				};

				if (this.admin_type != 1) data.store_id = localStorage.getItem('store_id');
				// 招商
				if (this.admin_id == 11 || this.admin_id == 5) data.parent_id = localStorage.getItem('user_id');

				if (this.type == 0) delete data.type;

				if (this.classSelect == 0) {
					data.user_id = this.selectContent;
				} else if (this.classSelect == 1) {
					data.store_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.parent_id = this.selectContent;
				} else if (this.classSelect == 3) {
					data.where = this.selectContent;
				}

				this.$http(this.$ApiList.BrowseItems, data).then(res => {
					this.userBrowseList = [];
					let that = this;
					res.datas.data.forEach(item => {
						item.type_name = this.classifyList[item.type].type_name
						that.userBrowseList.push(item);


					});
					that.userBrowseList.forEach(item => {
						if (item.client == 1) {
							item.client = 'C';
						} else {
							item.client = 'B';
						}
					})
					this.total = res.datas.count;
				});
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			goFootDetails(id) {
				this.$router.push({
					path: '/foot_details',
					query: {
						id: id
					}
				});
			},
			roleType(index) {
				this.type = index;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.type = 0;
				this.selectContent = '';
				this.classSelect = 0;
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	
</style>
